<template>
  <div>
    <div class="common_wraper">
        <div class="header">
            <h2>复星星选运营报表</h2>
            <div class="header_filter">
                <el-select v-model="form.industryIds" multiple collapse-tags placeholder="产业" class="h_select" @change="switchIndustry">
                    <el-checkbox v-model="checked" @change="selectAll">全选</el-checkbox>
                    <el-option
                      v-for="item in productsList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="form.brandIds" multiple collapse-tags placeholder="品牌" class="h_select" @change="switchBrand">
                    <el-checkbox v-model="checkedBrand" @change="selectAllBrand">全选</el-checkbox>
                    <el-option
                      v-for="item in brandsList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                </el-select>
                <el-date-picker
                  class="h_date_picker"
                  v-model="showDateTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  @change="changeDate">
                </el-date-picker>
            </div>
        </div>
        <div class="top_total_num">
            <ul class="clearfix">
                <li>
                    <i class="ico ico_total"></i>
                    <div class="total_det fl">
                        <h4>累计会员总数 <span>{{totalOverview.cumRegisterUserCnt}}</span></h4>
                        <p>累计截至: <span>{{form.endDate}}</span></p>
                    </div>
                </li>
                <li>
                    <i class="ico ico_reg"></i>
                    <div class="total_det fl">
                        <h4>注册会员数 <span>{{totalOverview.registerUserCntNow}}</span></h4>
                        <p>期环比<var>{{(totalOverview.registerUserCycleRate)}}%<i v-if="totalOverview.registerUserCycleRate > 0" class="triangle_up"></i><i v-if="totalOverview.registerUserCycleRate < 0" class="triangle_down"></i></var></p>
                    </div>
                </li>
                <li>
                    <i class="ico ico_liuzhuan"></i>
                    <div class="total_det fl">
                        <h4>流转会员人次 <span>{{totalOverview.circulCntNow}}</span></h4>
                        <p>期环比<var>{{(totalOverview.circulCycleRate)}}%<i v-if="totalOverview.circulCycleRate > 0" class="triangle_up"></i><i v-if="totalOverview.circulCycleRate < 0" class="triangle_down"></i></var></p>
                    </div>
                </li>
                <li>
                    <i class="ico ico_exposure"></i>
                    <div class="total_det fl">
                        <h4>权益曝光次数 <span>{{totalOverview.exposureRightsCntNow}}</span></h4>
                        <p>期环比<var>{{(totalOverview.exposureRightsCycleRate)}}%<i v-if="totalOverview.exposureRightsCycleRate > 0" class="triangle_up"></i><i v-if="totalOverview.exposureRightsCycleRate < 0" class="triangle_down"></i></var></p>
                    </div>
                </li>
                <li>
                    <i class="ico ico_get"></i>
                    <div class="total_det fl">
                        <h4>权益领取次数 <span>{{totalOverview.getRightsCntNow}}</span></h4>
                        <p>期环比<var>{{(totalOverview.getRightsCycleRate)}}%<i v-if="totalOverview.getRightsCycleRate > 0" class="triangle_up"></i><i v-if="totalOverview.getRightsCycleRate < 0" class="triangle_down"></i></var></p>
                    </div>
                </li>
                <li>
                    <i class="ico ico_hexiao"></i>
                    <div class="total_det fl">
                        <h4>权益核销次数 <span>{{totalOverview.spendRightsCntNow}}</span></h4>
                        <p>期环比<var>{{(totalOverview.spendRightsCycleRate)}}%<i v-if="totalOverview.spendRightsCycleRate > 0" class="triangle_up"></i><i v-if="totalOverview.spendRightsCycleRate < 0" class="triangle_down"></i></var></p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="common_wraper2 mt15">
            <div class="common_top_bg"><h2 class="m_title"><span class="dot"></span>会员概况</h2></div>
        </div>
        <div class="member_sec common_wraper2">
            <div class="common_mod wid1 fl">
                <div id="member_level" style="height: 197px;"></div>
                <dl class="h_member_level">
                    <dt></dt>
                    <dd>
                        <div v-for="item in userLevelList1">
                            <p>{{item.fenBu}}</p><span>{{item.registerCntRate}}%({{item.registerUserCntSum}})</span>
                        </div>
                    </dd>
                </dl>
                <ul class="h_member_level2">
                    <li v-for="(item, index) in userLevelList">
                        <i class="ico col1" v-if="index==0"></i>
                        <i class="ico col2" v-if="index==1"></i>
                        <p class="t1">{{item.name}}</p>
                        <p class="t2 fontcol1" v-if="index==0">{{item.registerCntRate}}%({{item.registerUserCntSum}})</p>
                        <p class="t2 fontcol2" v-if="index==1">{{item.registerCntRate}}%({{item.registerUserCntSum}})</p>
                    </li>
                </ul>
            </div>
            <div class="common_mod wid2 fl" id="member_conversion"></div>
            <div class="common_mod wid3 fr">
                <div id="member_register" style="height: 346px;"></div>
            </div>
        </div>
        <div class="member_sec_2 common_wraper2 mt10">
            <div class="common_mod wid1 fl">
                <div id="member_origin" style="float: left; width: 200px; height: 360px;"></div>
                <div class="member_origin_leng fl">
                    <swiper class="swiper" :options="swiperOption">
                        <swiper-slide v-for="(item,index) in Math.ceil(this.userSourceList.length/10)">
                            <ul class="clearfix">
                                <li v-for="(v,k) in userSourceList.slice(index*10, (index+1)*10)">
                                    <i class="ico col1" v-if="index==0 && k==0"></i>
                                    <i class="ico col2" v-if="index==0 && k==1"></i>
                                    <i class="ico col3" v-if="index==0 && k==2"></i>
                                    <i class="ico col4" v-if="index==0 && k==3"></i>
                                    <i class="ico col5" v-if="index==0 && k==4"></i>
                                    <i class="ico col6" v-if="index==0 && k==5"></i>
                                    <i class="ico col7" v-if="index==0 && k==6"></i>
                                    <i class="ico col8" v-if="index==0 && k==7"></i>
                                    <i class="ico col9" v-if="index==0 && k==8"></i>
                                    <i class="ico col_other" v-if="index==0 && k==9"></i>
                                    <i class="ico col_other" v-if="index>0"></i>
                                    <el-tooltip :content="v.fromBrandName +' '+ v.registerUserBrRate + '%'" placement="bottom" effect="light">
                                        <b>{{v.fromBrandName}}</b>
                                    </el-tooltip>
                                    <span>{{v.registerUserBrRate}}%</span>
                                </li>
                            </ul>
                        </swiper-slide>
                        
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
                    <div class="swiper-pagination" slot="pagination"></div>
                </div>
            </div>
            <div class="common_mod wid2 fl" id="member_channel"></div>
            <div class="common_mod wid3 fr" id="member_move"></div>
        </div>
        <div class="common_wraper2 mt15">
            <div class="common_top_bg">
                <h2 class="m_title"><span class="dot"></span>权益概况
                <el-select v-model="consume" @change="changeQuanyiBasic" class="h_select fr" style="margin-top: -4px;">
                    <el-option
                      v-for="item in quanyiBasic"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="rightLevel" @change="changeQuanyiType" class="h_select fr" style="margin-top: -4px;">
                    <el-option
                      v-for="item in quanyiList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                </el-select>
                </h2>
            </div>
        </div>
        <div class="quanyi_sec common_wraper2">
            <div class="common_mod wid1 fl">
                <div id="quanyi_link" style="height: 380px;"></div>
                <div class="quanyi_sel">
                    
                </div>
            </div>
            <div class="common_mod wid2 fr">
                <div id="quanyi_time" style="height: 340px;"></div>
            </div>
        </div>
        <div class="quanyi_sec_2 common_wraper2 mt10">
            <div class="common_mod wid1 fl" id="quanyi_type"></div>
            <div class="common_mod wid1 fr" id="quanyi_top"></div>
        </div>
        <div class="common_wraper2 mt15">
            <div class="common_top_bg"><h2 class="m_title"><span class="dot"></span>品牌概况</h2></div>
        </div>
        <div class="product_sec common_wraper2">
            <div class="common_mod wid1">
                <div id="product_quanyi" style="height: 340px;"></div>
            </div>
        </div>
        <div class="product_sec_2 common_wraper2 common_mod mt10">
            <div id="product_member" style="height: 340px;"></div>
        </div>
    </div>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

import http from '../utils/axios.js';

var linkImg = require("../assets/images/ico_link.png");
var linkImg2 = require("../assets/images/ico_link2.png");
export default {
  name: 'Home',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
        checked: false,
        checkedBrand: false,
        myChartLink: null,
        myChartTime: null,
        myChartUserChannel: null,
        showDateTime: "",
        totalOverview: {
            cumRegisterUserCnt: '',
            registerUserCntNow: '',
            registerUserCycleRate: '',
            circulCntNow: '',
            circulCycleRate: '',
            exposureRightsCntNow: '',
            exposureRightsCycleRate: '',
            getRightsCntNow: '',
            getRightsCycleRate: '',
            spendRightsCntNow: '',
            spendRightsCycleRate: ''
        },
        form: {
            industryIds: [], //产业
            brandIds: [],    //品牌
            startDate: "",     //开始日期
            endDate: ""       //结束日期
        },
        fromBrandId: "", //会员来源产业
        productsList: [],
        brandsList: [],
        consume: "", //全部为空; 核销即消费1;核销无消费0
        rightLevel: "", //全部、白金卡、金卡、银卡
        numberType: 0, //0：全部；1:曝光；2:领取；3：核销；4：消费；
        rightsGroup: "", //权益类型
        rightsLinkTitle: "", //权益链路标题
        rightsGroupTitle: "", //权益类型标题
        userLevelList1: [], //白金卡list
        userLevelList: [], //会员级别list
        userSourceList: [], //会员来源list
        quanyiBasic: [
            {
                "name": "全部",
                "value": ""
            },
            {
                "name": "核销即消费",
                "value": "1"
            },
            {
                "name": "核销无消费",
                "value": "0"
            }
        ],
        quanyiList: [
            {
                "name": "全部",
                "value": ""
            },
            {
                "name": "白金卡",
                "value": "白金卡"
            },
            {
                "name": "金卡",
                "value": "金卡"
            },
            {
                "name": "银卡",
                "value": "银卡"
            }
        ],
        swiperOption: {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        pickerOptions: {
            disabledDate(time) {
                var curDate = new Date();
                var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
                var preYear = new Date(curDate.getTime() - 365*24*60*60*1000); //前一年
                return time.getTime() > preDate.getTime() || time.getTime() < preYear.getTime();
            }
        }
    }
  },
  watch:{
      'showDateTime'(n,o){
        // console.log(n)
        if(!n){
          this.form.startDate = '';
          this.form.endDate = '';
        }else{
            var sDate = new Date(n[0]);
            var year = sDate.getFullYear();
            var month = sDate.getMonth() + 1; // 得到月份
            var date = sDate.getDate(); // 得到日期
            var startDate = `${year}/${month}/${date}`;

            var eDate = new Date(n[1]);
            var year2 = eDate.getFullYear();
            var month2 = eDate.getMonth() + 1; // 得到月份
            var date2 = eDate.getDate(); // 得到日期
            var endDate = `${year2}/${month2}/${date2}`;

            this.form.startDate = startDate;
            this.form.endDate = endDate;
        }
      },
      'form.industryIds'(newVal, oldVal){
        // console.log(newVal)
      }
  },
  mounted(){
    if(location.href.indexOf('companycn.net') > -1){
        document.domain = "companycn.net"; //解决iframe嵌入跨域问题
    }else if(location.href.indexOf('fosunalliance.com') > -1){
        document.domain = "fosunalliance.com"; //解决iframe嵌入跨域问题
    }
    
    this.init();
  },
  methods: {
    init(){
      this.getIndustry();    //获取产业品牌list
      this.initDatePicker(); //设置日期默认值
      
    },
    getUrlParam(name){
        var reg = new RegExp("(^|&)" +
        name + "=([^&]*)(&|$)");
        var r = window.parent.document.getElementById('report').contentWindow.location.search.substr(1).match(reg);
        // var r = window.parent.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    },
    initDatePicker(){
        var curDate = new Date();
        var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
        // var preDate = new Date(curDate.getTime() - 4*24*60*60*1000); //前一天
        var preMonth = new Date(curDate.getTime() - 30*24*60*60*1000); //前30天
        var year = preDate.getFullYear(); // 得到年份
        var month = preDate.getMonth() + 1; // 得到月份
        var date = preDate.getDate(); // 得到日期
        var defaultEnd = `${year}/${month}/${date}`;

        var year2 = preMonth.getFullYear(); // 得到年份
        var month2 = preMonth.getMonth() + 1; // 得到月份
        var date2 = preMonth.getDate(); // 得到日期
        var defaultStart = `${year2}/${month2}/${date2}`;

        this.showDateTime = [defaultStart, defaultEnd];
        this.form.startDate = defaultStart;
        this.form.endDate = defaultEnd;
    },
    selectAll(){
        var arr = []; 
        this.form.industryIds = [];
        if(this.checked){
            this.productsList.map((item) => {
                this.form.industryIds.push(item.id);
                arr.push(item.list);
            });
            this.brandsList = this.flatFn(arr);
        }else {
            this.form.industryIds = [];
            this.form.brandIds = [];
            this.brandsList = [];
            this.checkedBrand = false;
        }
        this.getApiData();
    },
    selectAllBrand(){
        this.form.brandIds = [];
        if(this.checkedBrand){
            this.brandsList.map((item) => {
                this.form.brandIds.push(item.id);
            });
        }else {
            this.form.brandIds = [];
        }
        this.getApiData();
    },
    getIndustry(){
        // var data = {
        //     r: '2',
        //     t: '1630326776801',
        //     i: '1,10,11,12,13,14,15,16,17,18,19,2,20,21,22,23,24,25,26,27,28,29,3,30,31,4,5,6,7,8,9',
        //     b: '1001,1002,5001,5002,5003,5004,6001,7001,7002,8001,8002,9001,10001,11001,12001,13001,14001,15001,16001,17001,18001,19001,20001,21001,22001,23001,24001,25001,26001,27001,28001,29001,30001,31001',
        //     sign: 'df40edcbfce3e327019696d3e5d97854'
        // };
        var r = this.getUrlParam('r');
        var t = this.getUrlParam('t');
        var i = this.getUrlParam('i');
        var b = this.getUrlParam('b');
        var sign = this.getUrlParam('sign');
        var data = {
            r: r,
            t: t,
            i: i,
            b: b,
            sign: sign
        };
        
        http.get('/report/check', data)
        .then((res) => {
            if(res.data && res.data.list.length){
                this.productsList = res.data.list;
                window.localStorage.setItem('token', res.data.token);
                this.switchIndustry();
                
            }
        });
    },
    flatFn(ary){
        var me = this;
        var result = [];
        for(let i=0; i < ary.length; i++){
            if(Array.isArray(ary[i])){
                for(let j=0; j < ary[i].length; j++){
                    result.push(ary[i][j]);
                }
            }else{
                result.push(ary[i]);
            }
        }
        return result;
    },
    switchIndustry(val){
        if(val && val.length == this.productsList.length){
            this.checked = true;
        }else {
            this.checked = false;
        }

        this.form.brandIds = [];
        this.checkedBrand = false;
        if(this.form.industryIds.length == 0){
            this.brandsList = [];

        }else {
            var arr = [];
            this.productsList.forEach((item) => {
                if(this.form.industryIds.indexOf(item.id) > -1){
                    arr.push(item.list);
                }
            });
            this.brandsList = this.flatFn(arr);    
        }
        
        this.fromBrandId = ''; //切换产业清空品牌分布
        this.getApiData();
    },
    switchBrand(){
        this.fromBrandId = ''; //切换品牌清空品牌分布
        this.getApiData();
    },
    changeDate(){
        this.getApiData();  
    },
    getApiData(){
        this.getOverview();    //头部概况
        this.getUserOverview(); //会员概况
        this.getUserChannel();  //会员来源渠道分布
        this.getRightsOverview(); //获取权益概况数据
        this.getRightsGroupTop(); //获取权益类型数据
        this.getRightsTop();  //获取权益top5数据
        this.getIndustryOverview(); //产业概况
    },
    setUserLevelData(list){
        this.userLevelList1 = [];
        this.userLevelList = [];
        list.forEach((item, index) => {
            if(item.userLevel == '金卡'){
                this.userLevelList.push({
                    name: item.userLevel,
                    registerUserCntSum: item.registerUserCntSum,
                    registerCntRate: item.registerCntRate
                });
            }else if(item.userLevel == '银卡'){
                this.userLevelList.push({
                    name: item.userLevel,
                    registerUserCntSum: item.registerUserCntSum,
                    registerCntRate: item.registerCntRate
                });
            }else if(item.userLevel == '白金卡'){
                this.userLevelList1 = item.childs.slice(0, 3);
            }
        });
    },
    getOverview(){
        var data = {
            ...this.form
        };
        data.industryIds = data.industryIds.join(',');
        data.brandIds = data.brandIds.join(',');
        
        http.get('/report/overview', data)
        .then((res) => {
            if(res.data){
                this.totalOverview = res.data;
            }
        });
    },
    getUserOverview(){
        var data = {
            ...this.form
        };
        data.industryIds = data.industryIds.join(',');
        data.brandIds = data.brandIds.join(',');

        http.get('/report/userOverview', data)
        .then((res) => {
            this.setUserLevelData(res.data.userLevelDistribution);
            this.initMemberLevel(res.data.userLevelDistribution); //会员级别分布
            this.initMemberConversion(res.data.userTransform); //会员转化分析
            this.initMemberRegister(res.data.userTrend); //会员注册趋势分析
            this.initMemberOrigin(res.data.userSourceDistribution); //会员来源产业分布
            this.initMemberMove(res.data.userFlow); //会员流转图
            this.userSourceList = res.data.userSourceDistribution;
        });
    },
    getUserChannel(title){
        var data = {
            ...this.form
        };
        data.industryIds = data.industryIds.join(',');
        data.brandIds = data.brandIds.join(',');

        http.get('/report/userChannelDistribution', {
            ...data,
            fromBrandId: this.fromBrandId
        })
        .then((res) => {
            this.initMemberChannel(res.data, title);
        });
    },
    getRightsOverview(){
        var data = {
            ...this.form
        };
        data.industryIds = data.industryIds.join(',');
        data.brandIds = data.brandIds.join(',');

        http.get('/report/rights', {
            ...data,
            consume: this.consume,
            rightLevel: this.rightLevel
        })
        .then((res) => {
            this.initQuanyiLink(res.data.rightsChain); //权益链路
            this.initQuanyiTrend(res.data.rightsTrend); //权益趋势
        });
    },
    getRightsGroupTop(title){
        var data = {
            ...this.form
        };
        data.industryIds = data.industryIds.join(',');
        data.brandIds = data.brandIds.join(',');

        http.get('/report/rights/group/top5', {
            ...data,
            consume: this.consume,
            rightLevel: this.rightLevel,
            numberType: this.numberType
        })
        .then((res) => {
            this.initQuanyiType(res.data.rightsTypeTop5, title);
        });
    },
    getRightsTop(){
        var data = {
            ...this.form
        };
        data.industryIds = data.industryIds.join(',');
        data.brandIds = data.brandIds.join(',');

        http.get('/report/rights/top5', {
            ...data,
            consume: this.consume,
            rightLevel: this.rightLevel,
            numberType: this.numberType,
            rightsGroup: this.rightsGroup
        })
        .then((res) => {
            this.initQuanyiTop(res.data);
        });
    },
    getIndustryOverview(){
        var data = {
            ...this.form
        };
        data.industryIds = data.industryIds.join(',');
        data.brandIds = data.brandIds.join(',');

        http.get('/report/industry', {
            ...data
        })
        .then((res) => {
            this.initProductQuanyi(res.data.industryRights);
            this.initProductMember(res.data.industryUser);
        });
    },
    initMemberLevel(result) {
      var chartDom = document.getElementById('member_level');
      var myChart = this.$echarts.init(chartDom);
      var data = [];
      result.forEach((item) => {
        data.push({
            name: item.userLevel,
            value: item.registerUserCntSum
        });
      });

      var option = {
        color: ['#FFD07F', '#FFE6B4', '#67AAE3'],
        title: {
            text: '{a|} 会员级别分布/身份分布',
            left: 'center',
            // top: 20,
            textStyle: {
                rich: {
                    a: {
                        width: 8,
                        height: 8,
                        verticalAlign: 'middle',
                        backgroundColor: '#F28F21',
                        borderRadius: 8
                    }
                }
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
            backgroundColor: '#eee',
            borderRadius: 10,
            left: 'center',
            top: '50%',
            orient: 'vertical',
            padding: [10, 20],
            itemWidth: 10,
            itemHeight: 10,
            formatter: function (name) {
                return name + '  50%';
            },
            selectedMode: false,
            textStyle: {
                color: '#333'
            },
            icon: 'circle'
        },
        series: [
            {
                name: '会员级别',
                type: 'pie',
                left: 'center',
                // top: 50,
                // bottom: 180,
                avoidLabelOverlap: false,
                itemStyle: {
                    
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        // show: true,
                        // fontSize: '20',
                        // fontWeight: 'bold',
                        // formatter: '{b}: {d}%'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
      };

      option && myChart.setOption(option);
    },
    initMemberConversion(result) {
      var chartDom = document.getElementById('member_conversion');
      var myChart = this.$echarts.init(chartDom);
      var arr1 = [];
      var arr2 = [];
      for(var k in result){
        if(k == 'cumRegisterUserCnt'){
            arr1.push({
                name: "注册",
                value: result[k]
            });
        }else if(k == 'cumVisitUserCnt'){
            arr1.push({
                name: "访问",
                value: result[k]
            });
        }else if(k == 'cumGetCuponUserCnt'){
            arr1.push({
                name: "领取",
                value: result[k]
            });
        }else if(k == 'cumSpendCuponUserCnt'){
            arr1.push({
                name: "核销",
                value: result[k]
            });
        }else if(k == 'cumPaymentUserCnt'){
            arr1.push({
                name: "消费",
                value: result[k]
            });
        }else if(k == 'cumRegRate'){
            arr2.push({
                name: "注册",
                value: result[k]
            });
        }else if(k == 'cumVisitUserRate'){
            arr2.push({
                name: "访问",
                value: result[k]
            });
        }else if(k == 'cumGetCuponRate'){
            arr2.push({
                name: "领取",
                value: result[k]
            });
        }else if(k == 'cumSpendCuponRate'){
            arr2.push({
                name: "核销",
                value: result[k]
            });
        }else if(k == 'cumPaymentRate'){
            arr2.push({
                name: "消费",
                value: result[k]
            });
        }
      }



      var option = {
            color: ['#FF8B02', '#F8B62D', '#FFBD74', '#7CDFEC', '#4EA9E9'],
            title: {
                text: '{a|} 会员转化分析',
                left: 25,
                // top: 20,
                textStyle: {
                    rich: {
                        a: {
                            width: 8,
                            height: 8,
                            verticalAlign: 'middle',
                            backgroundColor: '#F28F21',
                            borderRadius: 8
                        }
                    }
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                show: false
            },
            series: [
                {
                    sort: 'none',
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    name: '比率',
                    type: 'funnel',
                    left: 25,
                    width: '70%',
                    label: {
                        formatter: '{c}% {b}',
                        fontWeight: 'bold'
                    },
                    labelLine: {
                        length: 20,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        // opacity: 0.7
                    },
                    emphasis: {
                        label: {
                            position: 'inside',
                            formatter: '{c}% {b}'
                        }
                    },
                    data: [
                        {
                            name: "注册",
                            value: ""
                        },
                        {
                            name: "访问",
                            value: ""
                        },
                        {
                            name: "领取",
                            value: ""
                        },
                        {
                            name: "核销",
                            value: ""
                        },
                        {
                            name: "消费",
                            value: ""
                        }
                    ]
                },
                {
                    sort: 'none',
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}"
                    },
                    name: '人数',
                    type: 'funnel',
                    left: 25,
                    width: '70%',
                    // maxSize: '80%',
                    label: {
                        position: 'inside',
                        formatter: '{c}人',
                        fontWeight: 'bold',
                        color: '#fff'
                    },
                    itemStyle: {
                        // opacity: 0.5,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    emphasis: {
                        label: {
                            position: 'inside',
                            formatter: '{c}人'
                        }
                    },
                    data: [
                        {
                            name: "注册",
                            value: ""
                        },
                        {
                            name: "访问",
                            value: ""
                        },
                        {
                            name: "领取",
                            value: ""
                        },
                        {
                            name: "核销",
                            value: ""
                        },
                        {
                            name: "消费",
                            value: ""
                        }
                    ],
                    // Ensure outer shape will not be over inner shape when hover.
                    z: 100
                }
            ]
        };

        arr1.forEach((item, index) => {
            option.series[1].data.forEach((child, childIndex) => {
                if(item.name == child.name){
                    child.value = item.value;
                    return true;
                }
            });
        });

        arr2.forEach((item, index) => {
            option.series[0].data.forEach((child, childIndex) => {
                if(item.name == child.name){
                    child.value = item.value;
                    return true;
                }
            });
        });

      if(arr1.length && arr2.length){
        option && myChart.setOption(option);
      }else {
        myChart.setOption({
            title: {
                text: '{a|} 会员转化分析',
                left: 25,
                // top: 20,
                textStyle: {
                    rich: {
                        a: {
                            width: 8,
                            height: 8,
                            verticalAlign: 'middle',
                            backgroundColor: '#F28F21',
                            borderRadius: 8
                        }
                    }
                }
            },
            series: [
                {
                    data: []
                },
                {
                    data: []
                }
            ]
        });
      }
    },
    initMemberRegister(result) {
      var chartDom = document.getElementById('member_register');
      var myChart = this.$echarts.init(chartDom);
      var xData = [];
      var seriesCur = [];
      var seriesFirst = [];
      result.forEach((item) => {
        xData.push(item.statDate);
        seriesCur.push(item.registerUserCnt);
        seriesFirst.push(item.visitUserCnt);
      });

      var option = {
        title: {
            text: '{a|} 会员注册趋势分析',
            left: 25,
            textStyle: {
                rich: {
                    a: {
                        width: 8,
                        height: 8,
                        verticalAlign: 'middle',
                        backgroundColor: '#F28F21',
                        borderRadius: 8
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            textStyle: {
                align: 'left'
            }
        },
        legend: {
            show: true,
            left: 'right',
            data: ['当日注册会员数', '首次访问会员数'],
            itemWidth: 10,
            itemHeight: 10,
            icon: 'circle'
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: [0],
                show: true,
                realtime: true,
                start: 0,
                end: 50,
                zoomLock: true,
                handleSize: 0,
                height: 10,
                borderColor: 'transparent',
                fillerColor: '#A5A5A5',
                borderRadius: 5,
                backgroundColor: '#E5E5E5',
                showDataShadow: false,
                showDetail: false,
                minSpan: 20,
                maxSpan: 30,
                brushSelect: false,
                bottom: 0
            }
        ],
        xAxis: {
            type: 'category',
            data: xData,
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                rotate: 35
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '',
                // min: 0,
                // max: 500,
                // interval: 100,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '当日注册会员数',
                type: 'bar',
                data: seriesCur,
                barWidth: 10,
                // stack: '会员',
                // emphasis: {
                //     focus: 'series'
                // },
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#FAC03D'},
                            {offset: 1, color: '#F39800'}
                        ]
                    )
                }
            },
            {
                name: '首次访问会员数',
                type: 'bar',
                data: seriesFirst,
                barWidth: 10,
                // stack: '会员',
                // emphasis: {
                //     focus: 'series'
                // },
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#C7CED8'},
                            {offset: 1, color: '#9FAAB7'}
                        ]
                    )
                }
            },
            // {
            //     name: '访问转化率',
            //     type: 'line',
            //     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            //     smooth: true,
            //     yAxisIndex: 1,
            //     itemStyle: {
            //         color: '#B5B5B6'
            //     }
            // }
        ]
      };

      option && myChart.setOption(option);
    },
    initMemberOrigin(result) {
      var me = this;
      var originChartDom = document.getElementById('member_origin');
      var myOriginChart = this.$echarts.init(originChartDom);
      var data = [];
      var otherSum = 0;
      var ids = [];
      result.slice(0, 9).forEach((item, index) => {
        data.push({
            id: item.fromBrandId,
            name: item.fromBrandName,
            value: item.registerUserCntSum
        });
      });
      
      result.slice(9).forEach((item, index) => {
        otherSum += item.registerUserCntSum;
        ids.push(item.fromBrandId);
      });
      data.push({
            id: ids.join(','),
            name: '其它',
            value: otherSum
      });

      var option = {
        color: ['#F4D946', '#3193E5', '#FD7F7F', '#FAC36F', '#AC9AE2', '#78CDED', '#72B5EB', '#FFA748', '#A5A5A5', '#FC8602'],
        title: {
            text: '{a|} 会员来源品牌分布',
            left: 18,
            textStyle: {
                rich: {
                    a: {
                        width: 27,
                        height: 27,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: linkImg
                        }
                    }
                }
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
            backgroundColor: '#f7f7f7',
            borderRadius: 10,
            right: 20,
            top: 'middle',
            width: 220,
            orient: 'vertical',
            padding: [20, 20],
            itemWidth: 10,
            itemHeight: 10,
            formatter: function (name) {
                var total = 0;
                var num;
                data.forEach(function(item,index){
                    total += item.value;
                    if(item.name == name){
                        num = item.value;
                    }
                });
                // return '{per|' + name + '  ' + parseInt(num/total*100) + '%}';
                return name + '{per|}' + '{per2|' +parseInt(num/total*100) + '%}';
            },
            selectedMode: false,
            textStyle: {
                color: '#333',
                rich: {
                    per: {
                        width: 30
                    }
                    // per2: {
                    //     width: 30,
                    //     align: 'right'
                    // }
                }
            },
            icon: 'circle',
        },
        series: [
            {
                name: '会员来源品牌分布',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        // show: true,
                        // fontSize: '20',
                        // fontWeight: 'bold',
                        // formatter: '{b}: {d}%'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
      };

      option && myOriginChart.setOption(option); //设置会员来源产业分布配置项

      myOriginChart.off();
      myOriginChart.on('click', 'series', function(params){
        // console.log(params)
        //点击不同的产业分布改变渠道分布数据
        me.fromBrandId = params.data.id;
        me.getUserChannel(params.name);  //获取会员来源渠道分布数据
        // myChannelChart.setOption({
        //     title: {
        //         text: '{hel|}{a|' + params.name + '} 会员来源渠道分布'
        //     }
        // });
      });

      myOriginChart.getZr().on('click', function (event) {
        // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
        if (!event.target) {
            // 点击在了空白处，做些什么。
            me.fromBrandId = '';
            me.getUserChannel('全部');  //获取会员来源渠道分布数据
        }
      });
    },
    initMemberChannel(result, title) {
      var channelChartDom = document.getElementById('member_channel');
      var myChart = this.$echarts.init(channelChartDom);
      var tit = title ? title : '全部';
      

      var option = {
        title: {
            text: '{hel|}{a|' + tit + '} 会员来源渠道分布',
            left: 18,
            textStyle: {
                rich: {
                    hel: {
                        width: 27,
                        height: 27,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: linkImg2
                        }
                    },
                    a: {
                        width: 52,
                        height: 27,
                        align: 'center',
                        padding: [0, 15, 0, 2],
                        color: '#fff',
                        fontWeight: 'bold',
                        verticalAlign: 'middle',
                        borderRadius: [0, 15, 15, 0],
                        backgroundColor: '#D1C0A5'
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: false
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#EBEDF4'
                }
            },
            inverse: true
        },
        dataZoom: [
            {
                type: 'slider',
                yAxisIndex: [0],
                orient:"vertical",
                show: true,
                realtime: true,
                start: 0,
                end: 90,
                zoomLock: true,
                handleSize: 0,
                width: 10,
                borderColor: 'transparent',
                fillerColor: '#A5A5A5',
                borderRadius: 5,
                backgroundColor: '#E5E5E5',
                showDataShadow: false,
                showDetail: false,
                // minSpan: 20,
                // maxSpan: 30,
                brushSelect: false,
                bottom: 0
            }
        ],
        series: [
            {
                name: '',
                type: 'bar',
                label: {
                    show: true,
                    position: 'insideLeft',
                    fontSize: 12,
                    color: '#fff',
                    fontWeight: 'bold'
                },
                data: [
                    {
                        itemStyle: {
                            color: '#FFE263',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#FFBD74',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#FAC03D',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#F39800',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#FF849C',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#E7BD88',
                            borderRadius: [0, 5, 5, 0]
                        }
                    }
                ],
                showBackground: false,
                barWidth: 20,
                barMinHeight: 50
            }
        ]
      };

      result.forEach((item, index) => {
        option.yAxis.data.push({
            value: item.fromChannelName,
            textStyle: {
                color: '#333'
            }
        });
        option.series[0].data.forEach((child, childIndex) => {
            if(index == childIndex){
                child.value = item.registerUserCntSum;
                return true;
            }
        });
      });

      option && myChart.setOption(option);
    },
    initMemberMove(result) {
      var chartDom = document.getElementById('member_move');
      var myChart = this.$echarts.init(chartDom);
      var data = [];
      var colorArr = ['#ACD598', '#7CDFEC', '#4EA9E9', '#FFBD74', '#F8B62D', '#F39800'];

      result.nodes.forEach((item, index) => {
        data.push({
            name: item,
            itemStyle: {
                color: colorArr[Math.floor(Math.random() * colorArr.length)]
            }
        });
      });

      

      var option = {
        color: ['#ACD598', '#7CDFEC', '#4EA9E9', '#FFBD74', '#F8B62D', '#F39800'],
        title: {
            text: '{a|} 会员流转图',
            left: 25,
            textStyle: {
                rich: {
                    a: {
                        width: 8,
                        height: 8,
                        verticalAlign: 'middle',
                        backgroundColor: '#F28F21',
                        borderRadius: 8
                    }
                }
            }
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: {
            draggable: false,
            top: 30,
            type: 'sankey',
            layout: 'none',
            emphasis: {
                focus: 'adjacency'
            },
            data: data,
            links: result.links,
            levels: [{
                depth: 0,
                itemStyle: {
                    
                },
                lineStyle: {
                    color: '#cccccc',
                    // opacity: 0.6
                }
            }]
        }
      };

      option && myChart.setOption(option);
    },
    initQuanyiLink(result, title) {
      var me = this;
      var chartDom1 = document.getElementById('quanyi_link');
      this.myChartLink = this.$echarts.init(chartDom1);
      var data = [];

      for(var k in result){
        if(k == 'exposureRightsCnt'){
            data.push({
                name: "曝光",
                value: result[k]
            });
        }else if(k == 'getRightsCnt'){
            data.push({
                name: "领取",
                value: result[k]
            });
        }else if(k == 'spendRightsCnt'){
            data.push({
                name: "核销",
                value: result[k]
            });
        }else if(k == 'paymentRightsCnt'){
            data.push({
                name: "消费",
                value: result[k]
            });
        }
      }
      
      // var compare = function(obj1, obj2){
      //   var val1 = obj1.value;
      //   var val2 = obj2.value;
      //   if(val1 < val2){
      //       return -1;
      //   }else if(val1 > val2){
      //       return 1;
      //   }else {
      //       return 0;
      //   }
      // };
      // data.sort(compare);


      var tit = this.rightLevel ? this.rightLevel : '全部';
      var option = {
        title: {
            text: '{hel|}{a|' + tit + '}   权益链路分析',
            left: 18,
            textStyle: {
                rich: {
                    hel: {
                        width: 27,
                        height: 27,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: linkImg2
                        }
                    },
                    a: {
                        height: 27,
                        padding: [0, 15, 0, 2],
                        color: '#fff',
                        fontWeight: 'bold',
                        verticalAlign: 'middle',
                        borderRadius: [0, 15, 15, 0],
                        backgroundColor: '#D1C0A5'
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: false
        },
        grid: {
            left: '5%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: [
                {
                    value: '消费',
                    textStyle: {
                        color: '#333'
                    }
                },
                {
                    value: '核销',
                    textStyle: {
                        color: '#333'
                    }
                },
                {
                    value: '领取',
                    textStyle: {
                        color: '#333'
                    }
                },
                {
                    value: '曝光',
                    textStyle: {
                        color: '#333'
                    }
                }
            ],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#EBEDF4'
                }
            }
        },
        series: {
            name: '',
            type: 'bar',
            label: {
                show: true,
                position: 'insideLeft',
                fontSize: 12,
                color: '#fff',
                fontWeight: 'bold',
            },
            data: [
                {
                    name: '消费',
                    itemStyle: {
                        color: '#FFE263',
                        borderRadius: [0, 5, 5, 0]
                    }
                },
                {
                    name: '核销',
                    itemStyle: {
                        color: '#FFBD74',
                        borderRadius: [0, 5, 5, 0]
                    }
                },
                {
                    name: '领取',
                    itemStyle: {
                        color: '#FAC03D',
                        borderRadius: [0, 5, 5, 0]
                    }
                },
                {
                    name: '曝光',
                    itemStyle: {
                        color: '#F39800',
                        borderRadius: [0, 5, 5, 0]
                    }
                }
            ],
            showBackground: false,
            barWidth: 20,
            barMinHeight: 50
        }
      };

      data.forEach((item, index) => {
        // option.yAxis.data.push({
        //     value: item.name,
        //     textStyle: {
        //         color: '#333'
        //     }
        // });
        option.series.data.forEach((child, childIndex) => {
            if(item.name == child.name){
                child.value = item.value;
                return true;
            }
        });
      });

      option && this.myChartLink.setOption(option);
      
      // this.getQuanyiType(myChart3);
      // this.getQuanyiTop(myChart4);
      this.myChartLink.off();
      this.myChartLink.on('click', 'series', function(params){
        // console.log(params)
        //点击不同的权益链路改变权益类型top5
        if(params.name == '曝光'){
            me.numberType = 1;
        }else if(params.name == '领取'){
            me.numberType = 2;
        }else if(params.name == '核销'){
            me.numberType = 3;
        }else if(params.name == '消费'){
            me.numberType = 4;
        }
        
        me.rightsGroup = '';
        me.rightsGroupTitle = '全部';
        me.rightsLinkTitle = params.name;
        me.getRightsGroupTop(params.name);
        me.getRightsTop();
        // myChart3.setOption({
        //     title: {
        //         text: '{hel|}{a|' + params.name + '} 权益类型TOP5'
        //     }
        // });
      });

      // this.myChartLink.getZr().off();
      this.myChartLink.getZr().on('click', function (event) {
        // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
        if (!event.target) {
            // 点击在了空白处，做些什么。
            me.numberType = 0;
            me.rightsGroup = '';
            me.rightsGroupTitle = '全部';
            me.rightsLinkTitle = '全部';
            me.getRightsGroupTop('全部');
            me.getRightsTop();
        }
      });
    },
    initQuanyiTrend(result, title) {
      var chartDom = document.getElementById('quanyi_time');
      var myChart = this.$echarts.init(chartDom);

      var tit = this.rightLevel ? this.rightLevel : '全部';
      var xData = [];
      var exposeData = [];
      var getData = [];
      var spendData = [];
      result.forEach((item) => {
        xData.push(item.statDate);
        exposeData.push(item.exposureRightsCnt);
        getData.push(item.getRightsCnt);
        spendData.push(item.spendRightsCnt);
      });

      var option = {
        title: {
            text: '{hel|}{a|' + tit + '}   权益时间趋势',
            left: 18,
            textStyle: {
                rich: {
                    hel: {
                        width: 27,
                        height: 27,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: linkImg2
                        }
                    },
                    a: {
                        height: 27,
                        padding: [0, 15, 0, 2],
                        color: '#fff',
                        fontWeight: 'bold',
                        verticalAlign: 'middle',
                        borderRadius: [0, 15, 15, 0],
                        backgroundColor: '#D1C0A5'
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            textStyle: {
                align: 'left'
            }
        },
        legend: {
            show: true,
            left: 'right',
            // data: ['权益曝光次数', '权益领取次数', '权益核销次数'],
            itemWidth: 10,
            itemHeight: 10,
            icon: 'circle'
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: [0],
                show: true,
                realtime: true,
                start: 0,
                end: 50,
                zoomLock: true,
                handleSize: 0,
                height: 10,
                borderColor: 'transparent',
                fillerColor: '#A5A5A5',
                borderRadius: 5,
                backgroundColor: '#E5E5E5',
                showDataShadow: false,
                showDetail: false,
                minSpan: 20,
                maxSpan: 30,
                brushSelect: false,
                bottom: 0
            }
        ],
        xAxis: {
            type: 'category',
            data: xData,
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                rotate: 35
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '',
                // min: 0,
                // max: 5,
                // interval: 1,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '权益曝光次数',
                type: 'bar',
                data: exposeData,
                barWidth: 10,
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: '#F39800'
                }
            },
            {
                name: '权益领取次数',
                type: 'bar',
                data: getData,
                barWidth: 10,
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: '#FAC03D'
                }
            },
            {
                name: '权益核销次数',
                type: 'bar',
                data: spendData,
                barWidth: 10,
                itemStyle: {
                    borderRadius: [4, 4, 0, 0],
                    color: '#9FAAB7'
                }
            }
        ]
      };

      option && myChart.setOption(option);
    },
    changeQuanyiBasic(){
        //刷新权益概况数据
        this.numberType = 0;
        this.rightsGroup = '';
        this.rightsLinkTitle = '全部';
        this.rightsGroupTitle = '全部';
        this.getRightsOverview();
        this.getRightsGroupTop();
        this.getRightsTop();
    },
    changeQuanyiType(){
        //刷新权益概况数据
        this.numberType = 0;
        this.rightsGroup = '';
        this.rightsLinkTitle = '全部';
        this.rightsGroupTitle = '全部';
        this.getRightsOverview();
        this.getRightsGroupTop();
        this.getRightsTop();

        // var res;
        // this.quanyiList.forEach((item) => {
        //     if(this.form.quanyi == item.value){
        //         res = item.name;
        //     }
        // });

        // this.myChartTime.setOption({
        //     title: {
        //         text: '{hel|}{a|' + res + '} 权益时间趋势'
        //     },
        //     series: refreshData
        // });
    },
    initQuanyiType(result, title) {
      var me = this;
      var chartDom = document.getElementById('quanyi_type');
      var myChart = this.$echarts.init(chartDom);
      var tit1 = this.rightLevel ? this.rightLevel : '全部';
      var tit2 = title ? title : '全部';

      var option = {
        title: {
            text: '{hel|}{a|' + tit1 + '-' + tit2 +'}   权益类型TOP5',
            left: 18,
            textStyle: {
                rich: {
                    hel: {
                        width: 27,
                        height: 27,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: linkImg2
                        }
                    },
                    a: {
                        height: 27,
                        padding: [0, 15, 0, 2],
                        color: '#fff',
                        fontWeight: 'bold',
                        verticalAlign: 'middle',
                        borderRadius: [0, 15, 15, 0],
                        backgroundColor: '#D1C0A5'
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: false
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#EBEDF4'
                }
            }
        },
        series: [
            {
                name: '',
                type: 'bar',
                label: {
                    show: true,
                    position: 'insideLeft',
                    fontSize: 12,
                    color: '#fff',
                    fontWeight: 'bold',
                },
                data: [
                    {
                        itemStyle: {
                            color: '#A5A5A5',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#FFE263',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#FFBD74',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#FAC03D',
                            borderRadius: [0, 5, 5, 0]
                        }
                    },
                    {
                        itemStyle: {
                            color: '#F39800',
                            borderRadius: [0, 5, 5, 0]
                        }
                    }
                ],
                showBackground: false,
                barWidth: 20,
                barMinHeight: 100
            }
        ]
      };

      result.forEach((item, index) => {
        option.yAxis.data.push({
            value: item.rightsGroup,
            textStyle: {
                color: '#333'
            }
        });
        option.series[0].data.forEach((child, childIndex) => {
            if(index == childIndex){
                child.value = item.sumCnt;
                return true;
            }
        });
      });

      option && myChart.setOption(option);

      myChart.off();
      myChart.on('click', 'series', function(params){
        // console.log(params)
        //点击不同的权益类型改变权益top5
        me.rightsGroup = params.name;
        me.rightsGroupTitle = params.name;
        me.getRightsTop();
      });

      // myChart.getZr().off();
      myChart.getZr().on('click', function (event) {
        // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
        if (!event.target) {
            // 点击在了空白处，做些什么。
            me.rightsGroup = "";
            me.rightsGroupTitle = '全部';
            me.getRightsTop();
        }
      });
    },
    initQuanyiTop(result) {
      var chartDom = document.getElementById('quanyi_top');
      var myChart = this.$echarts.init(chartDom);
      var tit1 = this.rightLevel ? this.rightLevel : '全部';
      var tit2 = this.rightsLinkTitle ? this.rightsLinkTitle : '全部';
      var tit3 = this.rightsGroupTitle ? this.rightsGroupTitle : '全部';

      var option = {
        title: {
            text: '{hel|}{a|' + tit1 + '-' + tit2 + '-' + tit3 + '}   权益TOP5',
            left: 18,
            textStyle: {
                rich: {
                    hel: {
                        width: 27,
                        height: 27,
                        verticalAlign: 'middle',
                        backgroundColor: {
                            image: linkImg2
                        }
                    },
                    a: {
                        height: 27,
                        padding: [0, 15, 0, 2],
                        color: '#fff',
                        fontWeight: 'bold',
                        verticalAlign: 'middle',
                        borderRadius: [0, 15, 15, 0],
                        backgroundColor: '#D1C0A5'
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: "{b}: {c}"
        },
        legend: {
            show: false
        },
        grid: {
            left: 100,
            right: '4%',
            bottom: '3%',
            containLabel: false
        },
        xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#EBEDF4'
                }
            }
        },
        series: [
            {
                name: '',
                type: 'bar',
                label: {
                    show: true,
                    position: 'insideLeft',
                    fontSize: 12,
                    color: '#fff',
                    fontWeight: 'bold',
                },
                data: [
                    {
                        itemStyle: {
                            borderRadius: [0, 5, 5, 0],
                            color: new this.$echarts.graphic.LinearGradient(
                                1, 0, 0, 0,
                                [
                                    {offset: 0, color: '#E7F0FD'},
                                    {offset: 1, color: '#ACCBEE'}
                                ]
                            )
                        }
                    },
                    {
                        itemStyle: {
                            borderRadius: [0, 5, 5, 0],
                            color: new this.$echarts.graphic.LinearGradient(
                                1, 0, 0, 0,
                                [
                                    {offset: 0, color: '#BAC8E0'},
                                    {offset: 1, color: '#93A5CF'}
                                ]
                            )
                        }
                    },
                    {
                        itemStyle: {
                            borderRadius: [0, 5, 5, 0],
                            color: new this.$echarts.graphic.LinearGradient(
                                1, 0, 0, 0,
                                [
                                    {offset: 0, color: '#A3BDED'},
                                    {offset: 1, color: '#6991C7'}
                                ]
                            )
                        }
                    },
                    {
                        itemStyle: {
                            borderRadius: [0, 5, 5, 0],
                            color: new this.$echarts.graphic.LinearGradient(
                                1, 0, 0, 0,
                                [
                                    {offset: 0, color: '#00F2FE'},
                                    {offset: 1, color: '#4FACFE'}
                                ]
                            )
                        }
                    },
                    {
                        itemStyle: {
                            borderRadius: [0, 5, 5, 0],
                            color: new this.$echarts.graphic.LinearGradient(
                                1, 0, 0, 0,
                                [
                                    {offset: 0, color: '#00C0FA'},
                                    {offset: 1, color: '#015EEA'}
                                ]
                            )
                        }
                    }
                ],
                showBackground: false,
                barWidth: 20,
                barMinHeight: 100
            }
        ]
      };

      result.forEach((item, index) => {
        option.yAxis.data.push({
            value: item.rightsName,
            textStyle: {
                color: '#333',
                width: 80,
                overflow: 'truncate'
            }
        });
        option.series[0].data.forEach((child, childIndex) => {
            if(index == childIndex){
                child.value = item.sumCnt;
                return true;
            }
        });
      });

      option && myChart.setOption(option);
    },
    initProductQuanyi(result) {
      var chartDom = document.getElementById('product_quanyi');
      var myChart = this.$echarts.init(chartDom);

      var option = {
        title: {
            text: '{a|} 品牌的权益参与',
            left: 25,
            textStyle: {
                rich: {
                    a: {
                        width: 8,
                        height: 8,
                        verticalAlign: 'middle',
                        backgroundColor: '#F28F21',
                        borderRadius: 8
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            textStyle: {
                align: 'left'
            }
        },
        legend: {
            show: true,
            left: 'right',
            // data: ['当日注册会员数', '首次访问会员数'],
            itemWidth: 10,
            itemHeight: 10,
            icon: 'circle'
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: [0],
                show: true,
                realtime: true,
                start: 0,
                end: 50,
                zoomLock: true,
                handleSize: 0,
                height: 10,
                borderColor: 'transparent',
                fillerColor: '#A5A5A5',
                borderRadius: 5,
                backgroundColor: '#E5E5E5',
                showDataShadow: false,
                showDetail: false,
                minSpan: 20,
                maxSpan: 30,
                brushSelect: false,
                bottom: 0
            }
        ],
        xAxis: {
            type: 'category',
            data: [],
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                rotate: 35
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '',
                // min: 0,
                // max: 500,
                // interval: 100,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            // {
            //     type: 'value',
            //     name: '',
            //     min: 0,
            //     max: 100,
            //     interval: 20,
            //     axisLabel: {
            //         formatter: '{value} %'
            //     }
            // }
        ],
        series: [
            {
                name: '上架权益数',
                type: 'bar',
                data: [],
                barWidth: 10,
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#00C0FA'},
                            {offset: 1, color: '#015EEA'}
                        ]
                    )
                }
            },
            {
                name: '曝光权益数',
                type: 'bar',
                data: [],
                barWidth: 10,
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#7CDFEC'},
                            {offset: 1, color: '#3193E5'}
                        ]
                    )
                }
            },
            {
                name: '领取权益数',
                type: 'bar',
                data: [],
                barWidth: 10,
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#C7CED8'},
                            {offset: 1, color: '#9FAAB7'}
                        ]
                    )
                }
            },
            {
                name: '核销权益数',
                type: 'bar',
                data: [],
                barWidth: 10,
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#E4EFE9'},
                            {offset: 1, color: '#93A5CF'}
                        ]
                    )
                }
            }
        ]
      };

      result.forEach((item, index) => {
        option.xAxis.data.push({
            value: item.fromBrandName,
            textStyle: {
                color: '#333',
                width: 72,
                overflow: 'truncate'
            }
        });
        option.series[0].data.push(item.rightShelvesCnt);
        option.series[1].data.push(item.rightExposureCnt);
        option.series[2].data.push(item.rightGetCnt);
        option.series[3].data.push(item.rightSpendCnt);
      });

      option && myChart.setOption(option);
    },
    initProductMember(result) {
      var chartDom = document.getElementById('product_member');
      var myChart = this.$echarts.init(chartDom);

      var option = {
        title: {
            text: '{a|} 品牌的会员参与',
            left: 25,
            textStyle: {
                rich: {
                    a: {
                        width: 8,
                        height: 8,
                        verticalAlign: 'middle',
                        backgroundColor: '#F28F21',
                        borderRadius: 8
                    }
                }
            }
        },
        tooltip: {
            trigger: 'axis',
            // formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%',
            // formatter: function(params){
            //     // console.log(params)
            //     var tpl = [
            //         params[0].axisValue +'<br/>'+'<span style="display:inline-block;width:10px;height:10px;background:#F39800;border-radius:10px;margin-right:4px;"></span>'+ params[0].seriesName +'<span style="padding-left:15px;font-weight:bold;">'+ params[0].value+'</span><br/>',
            //         '<span style="display:inline-block;width:10px;height:10px;background:#FAC03D;border-radius:10px;margin-right:4px;"></span>'+params[1].seriesName +'<span style="padding-left:15px;font-weight:bold;">'+ params[1].value+'</span><br/>',
            //         '<span style="display:inline-block;width:10px;height:10px;background:#ccc;border-radius:10px;margin-right:4px;"></span>'+params[2].seriesName +'<span style="padding-left:15px;font-weight:bold;">'+ params[2].value+'%</span>'
            //     ];
            //     return tpl.join('');
            // },
            textStyle: {
                align: 'left'
            },
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: true,
            left: 'right',
            itemWidth: 10,
            itemHeight: 10,
            icon: 'circle'
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: [0],
                show: true,
                realtime: true,
                start: 0,
                end: 50,
                zoomLock: true,
                handleSize: 0,
                height: 10,
                borderColor: 'transparent',
                fillerColor: '#A5A5A5',
                borderRadius: 5,
                backgroundColor: '#E5E5E5',
                showDataShadow: false,
                showDetail: false,
                minSpan: 20,
                maxSpan: 30,
                brushSelect: false,
                bottom: 0
            }
        ],
        xAxis: {
            type: 'category',
            data: [],
            axisPointer: {
                type: 'shadow'
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                rotate: 35
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '',
                // min: 0,
                // max: 500,
                // interval: 100,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                tooltip: {
                    trigger: 'item'
                },
                name: '注册会员数',
                type: 'bar',
                data: [],
                barWidth: 10,
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: '#F39800'
                }
            },
            {
                tooltip: {
                    trigger: 'item'
                },
                name: '流转会员人次',
                type: 'bar',
                data: [],
                barWidth: 10,
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: '#FAC03D'
                }
            },
            {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/><span style="display:inline-block;width:10px;height:10px;background:#ccc;border-radius:10px;margin-right:4px;"></span>{b}  {c}%'
                },
                name: '会员流转率',
                type: 'scatter',
                data: [],
                symbolSize: 10,
                itemStyle: {
                    color: '#ccc'
                }
            }
        ]
      };

      result.forEach((item, index) => {
        option.xAxis.data.push({
            value: item.fromBrandName,
            textStyle: {
                color: '#333',
                width: 72,
                overflow: 'truncate'
            }
        });
        option.series[0].data.push(item.registerUserCnt1);
        option.series[1].data.push(item.circulCnt1);
        option.series[2].data.push(item.turnoverRate);
      });

      option && myChart.setOption(option);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
